<template>
  <div id="bottom4" style="height: 95%"></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      // 1.准备数据
      const data = [
        { type: "12:49", value: 19 },
        { type: "12:50", value: 24 },
        { type: "12:51", value: 20 },
        { type: "12:52", value: 15 },
        { type: "12:54", value: 17 },
        { type: "12:55", value: 23 },
        { type: "12:56", value: 24 },
      ];
      // 2.初始化图标事例，配置配置项
      const chart = new Chart({
        container: "bottom4",
        autoFit: true,
        height: 550,
      });
      chart.data(data);
      chart.animate({
        appear: {
          animation: "zoom-in", // 动画名称
          easing: "easeQuadIn", // 动画缓动效果
          delay: 3000, // 动画延迟执行时间
          duration: 10000, // 动画执行时间
        },
      });
      chart.scale({
        value: {
          max: 25,
          min: 0,
          alias: "相对湿度（HR）",
        },
      });
      chart.axis("type", {
        title: null,
        tickLine: null,
        line: null,
      });

      chart.axis("value", {
        label: null,
        title: {
          offset: 30,
          style: {
            fontSize: 20,
            fontWeight: 20,
          },
        },
      });
      chart.legend(false);
      chart.coordinate().transpose();
      chart
        .interval()
        .position("type*value")
        .size(10)
        .label("value", {
          style: {
            fill: "#8d8d8d",
          },
          offset: 10,
        });
      chart.interaction("element-active");
      // 3.执行绘画渲染
      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
<style scoped>
</style>